<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fetch EventSource 请求，vue2 项目 webpack 没有流式输出 - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="最近做类似AI会话gpt流式输出的效果，借助 vue ...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">fetch EventSource 请求，vue2 项目 webpack 没有流式输出</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">fetch EventSource 请求，vue2 项目 webpack 没有流式输出</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>十一月 18, 2024</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>4193</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
        
        <h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>最近做类似AI会话gpt流式输出的效果，借助 vue 的数据响应，可轻松实现流式输出，在 vue3+vite 的架构中，可以实现流式输出，今天同样功能特定客户需要vue2 + webpack来实现，要我写个demo，代码逻辑迁移过去换个写法而已，简单。。 可是写完后发现无法流式输出，总是一下子全部返回数据，即使设置了流式返回。</p>
<h2 id="请求代码"><a href="#请求代码" class="headerlink" title="请求代码"></a>请求代码</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fetch</span>(<span class="string">`/llmops/chat/apps/348/conversations/<span class="subst">$&#123;<span class="variable language_">this</span>.currentChatParam.conversationId&#125;</span>/qas/<span class="subst">$&#123;qaId&#125;</span>/stream`</span>, &#123;</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span><br><span class="line">  <span class="attr">headers</span>: &#123;</span><br><span class="line">    <span class="string">&#x27;Accept&#x27;</span>: <span class="string">&#x27;text/event-stream&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">credentials</span>: <span class="string">&#x27;include&#x27;</span>,</span><br><span class="line">  <span class="attr">body</span>: <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123; chatLogId &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (response.<span class="property">ok</span>) &#123;</span><br><span class="line">      <span class="keyword">const</span> reader = response.<span class="property">body</span>.<span class="title function_">getReader</span>();</span><br><span class="line">      <span class="keyword">const</span> decoder = <span class="keyword">new</span> <span class="title class_">TextDecoder</span>(<span class="string">&#x27;utf-8&#x27;</span>);</span><br><span class="line">      <span class="keyword">let</span> buffer = <span class="string">&#x27;&#x27;</span>; <span class="comment">// 用于存储解码后的完整数据</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">responseData</span> = [];</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">idx</span> = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> <span class="title function_">processStream</span> = (<span class="params">&#123; done, value &#125;</span>) =&gt; &#123;</span><br><span class="line">        <span class="keyword">if</span> (done) &#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;getResAnswer-4&#x27;</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>());</span><br><span class="line">          <span class="comment">// 如果流结束，处理剩余数据</span></span><br><span class="line">          <span class="keyword">if</span> (buffer) &#123;</span><br><span class="line">            <span class="keyword">const</span> lines = buffer.<span class="title function_">split</span>(<span class="string">&#x27;\n&#x27;</span>).<span class="title function_">map</span>(<span class="function"><span class="params">it</span> =&gt;</span> it.<span class="title function_">trim</span>()).<span class="title function_">filter</span>(<span class="function"><span class="params">it</span> =&gt;</span> it);</span><br><span class="line">            <span class="comment">// 不再使用pop来移除最后一行，改为检查所有行的数据</span></span><br><span class="line">            lines.<span class="title function_">forEach</span>(<span class="function"><span class="params">line</span> =&gt;</span> &#123;</span><br><span class="line">              <span class="keyword">const</span> str = line.<span class="title function_">trim</span>().<span class="title function_">split</span>(<span class="string">&#x27;data:&#x27;</span>)[<span class="number">1</span>];</span><br><span class="line">              <span class="keyword">if</span> (str) &#123;</span><br><span class="line">                <span class="keyword">const</span> parsedData = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(str);</span><br><span class="line">                <span class="variable language_">this</span>.<span class="property">responseData</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line">                  <span class="attr">answer</span>: parsedData.<span class="property">answer</span>,</span><br><span class="line">                  <span class="attr">answerType</span>: <span class="string">&#x27;text&#x27;</span>,</span><br><span class="line">                  <span class="attr">isEnd</span>: parsedData.<span class="property">isEnd</span> === <span class="number">1</span>, <span class="comment">// 判断是否为最后一条数据</span></span><br><span class="line">                &#125;);</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;);</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 解码当前 chunk 并追加到缓冲区</span></span><br><span class="line">        buffer += decoder.<span class="title function_">decode</span>(value, &#123; <span class="attr">stream</span>: <span class="literal">true</span> &#125;);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 处理缓冲区数据，按行拆分</span></span><br><span class="line">        <span class="keyword">let</span> lines = buffer.<span class="title function_">split</span>(<span class="string">&#x27;\n&#x27;</span>).<span class="title function_">map</span>(<span class="function"><span class="params">it</span> =&gt;</span> it.<span class="title function_">trim</span>()).<span class="title function_">filter</span>(<span class="function"><span class="params">it</span> =&gt;</span> it);</span><br><span class="line">        buffer = lines.<span class="title function_">pop</span>(); <span class="comment">// 取出未完成的最后一行，留待下一次</span></span><br><span class="line"></span><br><span class="line">        lines.<span class="title function_">forEach</span>(<span class="function">(<span class="params">line, idx</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">const</span> str = line.<span class="title function_">trim</span>().<span class="title function_">split</span>(<span class="string">&#x27;data:&#x27;</span>)[<span class="number">1</span>];</span><br><span class="line">          <span class="keyword">if</span> (str) &#123;</span><br><span class="line">            <span class="keyword">const</span> parsedData = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(str);</span><br><span class="line">            <span class="keyword">const</span> isEnd = parsedData.<span class="property">isEnd</span> === <span class="number">1</span>; <span class="comment">// 判断是否为最后一条数据</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">responseData</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line">              <span class="attr">answer</span>: parsedData.<span class="property">answer</span>,</span><br><span class="line">              <span class="attr">answerType</span>: <span class="string">&#x27;text&#x27;</span>,</span><br><span class="line">              isEnd, <span class="comment">// 根据 parsedData 的 isEnd 字段来确定是否结束</span></span><br><span class="line">            &#125;);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 递归处理流中的下一块数据</span></span><br><span class="line">        <span class="keyword">return</span> reader.<span class="title function_">read</span>().<span class="title function_">then</span>(processStream);</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 启动流的读取</span></span><br><span class="line">      reader.<span class="title function_">read</span>().<span class="title function_">then</span>(processStream);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;Failed to connect to the stream:&#x27;</span>, response.<span class="property">status</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;Fetch error:&#x27;</span>, error));</span><br></pre></td></tr></table></figure>

<h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><p>webpack中 默认开启了 compress，在 vue.config.js 设置为false，</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">host</span>: <span class="string">&quot;0.0.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">port</span>: <span class="number">5001</span>,</span><br><span class="line">    <span class="attr">open</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">compress</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">proxy</span>: &#123;</span><br><span class="line">      <span class="string">&quot;/aaaaaa/&quot;</span>: &#123;</span><br><span class="line">        <span class="comment">// ngnix 代理了/ragapi</span></span><br><span class="line">        <span class="attr">target</span>: <span class="string">&quot;http://aaaaaaaaa/&quot;</span>, <span class="comment">// 线上地址</span></span><br><span class="line">        <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">secure</span>: <span class="literal">false</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<p>此时可流式输出，vite中 compress 默认是 false 所以不用设置就可流式输出</p>
<h2 id="nginx配置"><a href="#nginx配置" class="headerlink" title="nginx配置"></a>nginx配置</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">location / &#123;</span><br><span class="line">	add_header Cache-Control no-cache;</span><br><span class="line">	proxy_set_header Connection &#x27;&#x27;;</span><br><span class="line">	proxy_http_version 1.1;</span><br><span class="line">	chunked_transfer_encoding off;</span><br><span class="line">	proxy_buffering off;</span><br><span class="line">	proxy_cache off;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="参数解释"><a href="#参数解释" class="headerlink" title="参数解释"></a>参数解释</h2><p>在 <code>vue.config.js</code> 文件中，<code>devServer</code> 是一个用于配置 Vue CLI 项目开发服务器的对象。当你设置 <code>compress: false</code> 时，你实际上是在告诉开发服务器不要对响应的内容进行压缩。</p>
<p>compress 选项的作用通常是控制开发服务器是否应该使用 gzip 或其他压缩算法来压缩发送给浏览器的响应内容。当设置为 <code>true</code> 时，服务器会尝试压缩响应，这通常可以减少传输的数据量，因为压缩后的内容通常比原始内容更小。但是，这也需要额外的 CPU 时间来进行压缩和解压缩操作。<br>在开发环境中，<code>compress: false</code> 可能有以下好处：</p>
<ol>
<li><strong>更快的响应速度</strong>：由于不需要进行压缩和解压缩操作，服务器可以更快地发送响应给浏览器。</li>
<li><strong>避免压缩相关的错误</strong>：有时，压缩算法可能会与某些内容类型或代码不兼容，导致在浏览器中出现显示问题或错误。在开发环境中禁用压缩可以避免这些问题。</li>
<li><strong>简化调试</strong>：未压缩的响应内容更易于阅读和调试，特别是当你正在查看网络请求和响应时。</li>
</ol>
<p>然而，在生产环境中，你通常会希望启用响应压缩（例如，通过设置 HTTP 头部 <code>Content-Encoding: gzip</code>），以减少网络传输的开销和提高用户体验。这通常是在 Web 服务器（如 Nginx、Apache）或 CDN 层面上配置的，而不是在应用程序的开发服务器中。</p>
<p>总之，<code>compress</code> 选项在 <code>vue.config.js</code> 的 <code>devServer</code> 配置中用于控制开发服务器是否应该对响应内容进行压缩。将其设置为 <code>false</code> 可以加快开发过程中的响应速度，并避免与压缩相关的潜在问题。</p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2024/11/18/vue-stream-api/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;11&#x2F;18&#x2F;vue-stream-api&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;11&#x2F;18&#x2F;vue-stream-api&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/vite/" rel="tag">vite</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpack/" rel="tag">webpack</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%B5%81%E5%BC%8F/" rel="tag">流式</a></li></ul> 

        
  <nav class="nav">
    <a href="/2024/12/10/python-image-to-svg/"><i class="iconfont iconleft"></i>将位图嵌入SVG：一个简单的Python脚本</a>
    <a href="/2024/08/02/breakthrough-css/">CSS 难点攻克<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF"><span class="toc-text">背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82%E4%BB%A3%E7%A0%81"><span class="toc-text">请求代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-text">解决方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nginx%E9%85%8D%E7%BD%AE"><span class="toc-text">nginx配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%A7%A3%E9%87%8A"><span class="toc-text">参数解释</span></a></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>